{extend name="base" /}
{block name="content"}
<style type="text/css">
    .checkbox{
        margin-bottom: 10px;
        margin-right: 20px;
    }
</style>
<div class="content">
    <div class="container-fluid">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{:url('index/index')}"><i class="fe-home"></i> 控制台</a></li>
                            <li class="breadcrumb-item"><a href="javascript: void(0);">角色管理</a></li>
                            <li class="breadcrumb-item active">编辑角色信息</li>
                        </ol>
                    </div>
                    <h4 class="page-title">
                        <button onClick="javascript:history.go(-1)" type="button" class="btn btn-xs btn-secondary waves-effect waves-light">
                            <i class="fe-corner-up-left"></i> 返回
                        </button>
                        <i class="fe-edit-1"></i> 编辑角色
                    </h4>
                </div>
            </div>
        </div>
       <!--  <div class="row">
            <div class="col-lg-12 col-md-6">
                <div class="alert alert-success alert-dismissable">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
                <i class="mdi mdi-alert-circle-outline mr-2"></i>排序提示：数值越小越排在前面
            </div>  
            </div>
        </div> -->
        <div class="row">
        <div class="col-lg-12 col-md-12">
            <div class="card-box">
                    <form id="form1">
                    <input type="hidden" name="id" value="{$detail.id}">
                    <div class="form-group row">
                        <label for="user" class="col-2 col-form-label">角色名称</label>
                        <div class="col-5">
                            <input type="text" class="form-control" value="{$detail['role_name']}" id="role_name" name="role_name" placeholder="角色名称">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="user" class="col-2 col-form-label">角色状态</label>
                        <div class="col-3">
                           <select class="custom-select " id="type" name="status">
                                <option value="1" {if condition="$detail.status == 1"}selected{/if}>启用</option>
                                <option value="2" {if condition="$detail.status == 2"}selected{/if}>禁用</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="user" class="col-2 col-form-label">勾选权限</label>
                        <div class="col-10">
                            <div>
                                <button type="button" class="btn btn-success btn-xs waves-effect waves-light seleAll">
                                    <span class="btn-label"><i class="mdi mdi-check-all"></i></span>全选
                                </button>

                                <button type="button" class="btn btn-warning btn-xs waves-effect waves-light op">
                                    <span class="btn-label"><i class="mdi mdi-close-circle-outline"></i></span>全不选
                                </button>

                            </div>

                            {foreach $accesses as $key => $val}
                            <div class="ckbo" style="border-bottom: 1px dashed #ccc; padding-bottom: 20px;">
                                <!-- <p class="text-muted font-14 mt-3 mb-2">{$val['name']}</p> -->
                                <p class="text-muted font-14 mt-3 mb-2">
                                    <div class="checkbox checkbox-danger form-check-inline sam-{$val['id']}">
                                        <input type="checkbox" class="pand" id="sam-{$val['id']}" data-parent="{$val['id']}" onclick="parent(this)" name="role_accesses[]" value="{$val['sign']}" {if condition="strstr($detail['role_accesses'], $val['sign'])"}checked{/if}>
                                        <label for="inlineCheckbox2"> {$val['name']} </label>
                                    </div>
                                </p>

                                {foreach $val['second'] as $k => $v}
                                <div class="checkbox checkbox-success form-check-inline sam-{$val['id']}">
                                    <input type="checkbox" name="role_accesses[]" class="parent-{$val['id']}" data-parent="{$val['id']}" onclick="sam(this)" {if condition="strstr($detail['role_accesses'], $v['sign'])"}checked{/if} value="{$v['sign']}">
                                    <label for="inlineCheckbox2"> {$v['name']} </label>
                                </div>
                                {/foreach}
                            </div>
                            {/foreach}
                        </div>
                    </div>
                    
                    <div class="form-group mb-3 justify-content-end row">
                        <div class="col-10">
                             <a class="btn btn-info waves-effect waves-light" style="color: #fff" onclick="postBtn()" >提交</a>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div> <!-- container -->
</div> <!-- content -->
<script type="text/javascript" src="/static/app/cripts/jquery.js"></script>
<script src="/static/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['element', 'form', 'layedit','upload'], function () {
        var form = layui.form;
        var $ = layui.jquery,upload = layui.upload;
    })
    
    function sam(e){
        var parent = $(e).attr('data-parent');  
        //当选中的长度等于checkbox的长度的时候,就让控制全选反选的checkbox设置为选中,否则就为未选中

       if($(".sam-"+parent+" input[name='role_accesses']").length === $(".sam"+parent+" input:checked").length) {
           $("input[id='sam-"+parent+"']").prop("checked", true);
       } else if($(".sam"+parent+" input:checked").length === 0){
            $("input[id='sam-"+parent+"']").prop("checked", false);
       } else {
           $("input[id='sam-"+parent+"']").prop("checked", false);
       }

    }

    //点击父级全选子级
    function parent(e){
        var parent = $(e).attr('data-parent');  //当前的所有权限

        if($(e).is(':checked')){
            $("input[class='parent-"+parent+"']").prop("checked", true);
        } else{
            $("input[class='parent-"+parent+"']").prop("checked", false);
        }
    }
    //全选
    $(".seleAll").on("click",function(){
        var oin=$("input[type='checkbox']")
        oin.each(function(){
            $(this).prop("checked",true)
        })

    })
    //全不选
    $(".op").on("click",function(){
        var oin=$("input[type='checkbox']")
        oin.each(function(){
            $(this).prop("checked",false)
        })
    })

    function postBtn(e){
        var data = $('#form1').serialize();
        $.post('/admin/role/edit', data, function(res){
            if(res.code == 0){
                layer.msg(res.message,{icon:1, time:1000, shade: [0.2, '#000']});
                setTimeout(function(){
                    window.location.href=res.data.url;
                },1000);
            }else{
                layer.msg(res.message,{icon:5, anim: 6, time:1000, shade: [0.2, '#000']});
            }
        },'json');
    }
</script>
{/block}